<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人简历详情22001011032刘晓妍</title>
    <link rel="stylesheet" href="./css/user.css" />
    <link rel="stylesheet" href="./css/header.css" />
    <script src="./js/getname.js"></script>
    <style></style>
  </head>
  <body>
    <header class="header">
      <div class="logo">BOSS直聘</div>
      <nav class="nav-menu">
        <a href="./index.html">首页</a>
        <a href="./recommend.html">推荐</a>
        <a href="#">搜索·公司</a>
        <a href="#">校园·海归</a>
        <a href="#">APP</a>
        <a href="#">资讯</a>
        <a href="#">有了</a>
        <a href="#">海外</a>
        <a href="#">无障碍专区</a>
      </nav>
      <div class="user-info">
        <span>消息</span>
        <span>简历</span>
        <span id="username" onclick="goToPage('./user.html')">默认用户名</span>
      </div>
    </header>
    <div class="container">
      <main class="main-content">
        <div class="profile-section">
          <img src="/api/placeholder/80/80" alt="李明菲" class="profile-avatar" />
          <div class="profile-info">
            <div class="name-section">
              <span class="name">李明菲</span>
              <span class="vip-tag">升级VIP</span>
            </div>
            <div class="basic-info">
              <span>23岁</span>
              <span>2年经验</span>
              <span>大专</span>
            </div>
            <div class="job-status">离职-随时到岗</div>
          </div>
        </div>

        <div class="stats-section">
          <div class="stat-item">
            <div class="stat-value">963</div>
            <div class="stat-label">沟通过</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">24</div>
            <div class="stat-label">已投递</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">0</div>
            <div class="stat-label">面试</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">0</div>
            <div class="stat-label">感兴趣</div>
          </div>
        </div>

        <!-- <div class="job-list">
          <div class="job-item">
            <div class="recruiter-info">
              <img src="/api/placeholder/40/40" alt="李长杰" class="recruiter-avatar" />
              <div>
                李长杰
                <div style="font-size: 12px; color: #999">人事HR</div>
              </div>
            </div>
            <div class="job-detail">
              <div class="job-title">兼职·全栈工程师 [天津-河东区-二号桥]</div>
              <div class="company-info">
                <div>1-3年 / 月结</div>
                <div class="salary">2000-2500元/月</div>
              </div>
              <div class="company-meta">
                <span>计算机软件</span>
                <span>未融资</span>
                <span>20-99人</span>
              </div>
            </div>
            <img src="/api/placeholder/60/60" alt="正成" class="company-logo" />
          </div>
        </div> -->
        <div id="job-list-container" class="job-list">
          <!-- Job items will be dynamically rendered here -->
        </div>
      </main>

      <aside class="sidebar">
        <div class="attachment-header">
          <h3>附件管理</h3>
          <span>+</span>
        </div>

        <div class="file-item">
          <div class="file-icon">PDF</div>
          <div class="file-info">
            <div class="file-name">简历-三年经验.pdf</div>
            <div class="file-meta">1.0MB 更新于 2024.07.09 19:51</div>
          </div>
        </div>

        <div class="quick-resume">
          <h3>快速生成附件简历</h3>
          <div class="template-list">
            <div class="template-item">海量范例</div>
            <div class="template-item">免费版</div>
            <div class="template-item">智能改写</div>
          </div>
        </div>

        <div class="vip-section">
          <h3>VIP兑换</h3>
          <div class="vip-input">
            <input type="text" placeholder="输入道具VIP兑换码" />
            <button>兑换</button>
          </div>
        </div>
      </aside>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // 状态切换
        const jobStatus = document.querySelector(".job-status");
        jobStatus.addEventListener("click", function () {
          // 这里可以添加状态切换逻辑
        });

        // VIP兑换
        const vipButton = document.querySelector(".vip-input button");
        vipButton.addEventListener("click", function () {
          const code = document.querySelector(".vip-input input").value;
          if (code) {
            alert("正在处理兑换请求...");
          } else {
            alert("请输入兑换码");
          }
        });

        // 附件管理
        const addAttachment = document.querySelector(".attachment-header span");
        addAttachment.addEventListener("click", function () {
          // 这里可以添加上传附件的逻辑
          alert("请选择要上传的文件");
        });
        const data = {
          jobList: [
            {
              recruiter: {
                name: "李长杰",
                position: "人事HR",
                avatar: "./imgs/avatr1.png",
              },
              jobDetail: {
                title: "兼职·全栈工程师 [大连-河东区-二号桥]",
                experience: "1-3年",
                salary: "2000-2500元/月",
                companyInfo: {
                  industry: "计算机软件",
                  funding: "未融资",
                  size: "20-99人",
                },
                companyLogo: "/api/placeholder/60/60",
              },
            },
            {
              recruiter: {
                name: "张小玲",
                position: "人事经理",
                avatar: "./imgs/avatr2.png",
              },
              jobDetail: {
                title: "全职·前端开发工程师 [大连-开发区]",
                experience: "2-5年",
                salary: "6000-8000元/月",
                companyInfo: {
                  industry: "互联网",
                  funding: "A轮",
                  size: "100-499人",
                },
                companyLogo: "/api/placeholder/60/60",
              },
            },
            {
              recruiter: {
                name: "王天明",
                position: "HR主管",
                avatar: "./imgs/avatr3.png",
              },
              jobDetail: {
                title: "兼职·产品经理 [大连-甘井子区]",
                experience: "1-2年",
                salary: "4000-5000元/月",
                companyInfo: {
                  industry: "电子商务",
                  funding: "天使轮",
                  size: "50-100人",
                },
                companyLogo: "/api/placeholder/60/60",
              },
            },
            {
              recruiter: {
                name: "吴晨",
                position: "高级HR",
                avatar: "/imgs/avatr5.png",
              },
              jobDetail: {
                title: "全职·UI设计师 [大连-高新技术区]",
                experience: "3-5年",
                salary: "6000-8000元/月",
                companyInfo: {
                  industry: "互联网",
                  funding: "D轮",
                  size: "200-499人",
                },
                companyLogo: "",
              },
            },
          ],
        };

        // Function to render job listings
        function renderJobList() {
          const container = document.getElementById("job-list-container");

          data.jobList.forEach(job => {
            const jobItemDiv = document.createElement("div");
            jobItemDiv.classList.add("job-item");

            // Recruiter info
            const recruiterInfoDiv = document.createElement("div");
            recruiterInfoDiv.classList.add("recruiter-info");

            const recruiterAvatar = document.createElement("img");
            recruiterAvatar.src = job.recruiter.avatar;
            recruiterAvatar.alt = job.recruiter.name;
            recruiterAvatar.classList.add("recruiter-avatar");

            const recruiterNameDiv = document.createElement("div");
            recruiterNameDiv.textContent = job.recruiter.name;
            const recruiterPositionDiv = document.createElement("div");
            recruiterPositionDiv.style.fontSize = "12px";
            recruiterPositionDiv.style.color = "#999";
            recruiterPositionDiv.textContent = job.recruiter.position;

            recruiterInfoDiv.appendChild(recruiterAvatar);
            recruiterInfoDiv.appendChild(recruiterNameDiv);
            recruiterInfoDiv.appendChild(recruiterPositionDiv);

            // Job details
            const jobDetailDiv = document.createElement("div");
            jobDetailDiv.classList.add("job-detail");

            const jobTitleDiv = document.createElement("div");
            jobTitleDiv.classList.add("job-title");
            jobTitleDiv.textContent = job.jobDetail.title;

            const companyInfoDiv = document.createElement("div");
            companyInfoDiv.classList.add("company-info");
            companyInfoDiv.innerHTML = `<div>${job.jobDetail.experience} / 月结</div><div class="salary">${job.jobDetail.salary}</div>`;

            const companyMetaDiv = document.createElement("div");
            companyMetaDiv.classList.add("company-meta");
            companyMetaDiv.innerHTML = `<span>${job.jobDetail.companyInfo.industry}</span><span>${job.jobDetail.companyInfo.funding}</span><span>${job.jobDetail.companyInfo.size}</span>`;

            jobDetailDiv.appendChild(jobTitleDiv);
            jobDetailDiv.appendChild(companyInfoDiv);
            jobDetailDiv.appendChild(companyMetaDiv);

            // Company logo
            const companyLogoImg = document.createElement("img");
            // companyLogoImg.src = job.jobDetail.companyLogo;
            // companyLogoImg.alt = "Company Logo";
            // companyLogoImg.classList.add("company-logo");

            jobItemDiv.appendChild(recruiterInfoDiv);
            jobItemDiv.appendChild(jobDetailDiv);
            jobItemDiv.appendChild(companyLogoImg);

            container.appendChild(jobItemDiv);
          });
        }

        // Call the render function to display the job listings
        renderJobList();
      });
    </script>
  </body>
</html>
